<template>
  <div class="occupant" v-if="unifiedAmount">
    <div class="title">订单金额</div>

    <div class="info-list">
      <div class="item">
        <div class="label">房费{{ unifiedAmount.days }}晚</div>
        <div class="value">￥{{ unifiedAmount.stayAmount }}</div>
      </div>
      <div class="item">
        <div class="label">押金</div>
        <div class="value">
          <span class="tips">退房后24小时内自动返还</span>
          ￥{{ unifiedAmount.depositAmount }}
        </div>
      </div>
      <div class="item">
        <div class="label">专享优惠</div>
        <div class="value price">-￥{{ unifiedAmount.discountAmount }}</div>
      </div>
      <!-- <div class="item">
        <div class="label">活动优惠</div>
        <div class="value"><span class="tips">无可用优惠</span></div>
      </div> -->
    </div>

    <div class="settlement">
      <div class="item">
        本单您需支付
        <span class="price">￥{{ unifiedAmount.finalAmount }}</span>
      </div>
      <!-- <div class="item">
        已享最大优惠组合
        <span class="reduce">共省￥0</span>
      </div> -->
    </div>
  </div>

  <div class="invoice" @click="to('/pages-sub/hotel/invoice/index', { phone: hotel.phone })">
    <div class="title">发票</div>
    <div class="right active">
      申请开具发票
      <span class="i-carbon-chevron-right icon"></span>
    </div>
  </div>

  <div class="tips-list">
    <div class="tip">{{ hotel.timeoutRule }}</div>
    <div class="tip">
      预订协议:我同意
      <span @click="toAgreement('hotels_service')">《服务协议》</span>
      <span @click="toAgreement('room_rule')">《房客规则》</span>
      <span @click="toAgreement('hotels_notice')">《住宿旅行意外险告知书》</span>
      及房东规定的退订入住要求
    </div>
  </div>
</template>
<script lang="ts" setup>
import { to } from '@/utils/page'

defineOptions({ name: 'Order-info' })
defineProps(['hotel', 'dateInfo', 'unifiedAmount'])

function toAgreement(type) {
  uni.navigateTo({
    url: `/pages-sub/system/agreement?type=${type}`,
  })
}
</script>
<style lang="scss" scoped>
.occupant {
  margin: 26rpx 30rpx 0;
  background-color: #fff;
  border-radius: 30rpx;
  .title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 77rpx;
    margin: 0 20rpx;
    font-size: 30rpx;
    font-weight: 700;
    color: var(--color1);
  }

  .info-list {
    padding: 20rpx;
    .item {
      display: flex;
      align-items: center;
      height: 58rpx;
      font-size: 27rpx;
      color: var(--color1);
      .value {
        flex: 1;
        font-weight: 600;
        text-align: right;
        .tips {
          font-weight: 500;
          color: var(--color4);
        }
        &.price {
          color: var(--sc2);
        }
      }
    }
  }

  .settlement {
    padding: 0 20rpx 24rpx;
    .item {
      font-size: 27rpx;
      line-height: 58rpx;
      color: var(--color1);
      text-align: right;
      .price {
        font-size: 35rpx;
        font-weight: 600;
      }
      .reduce {
        color: var(--sc2);
      }
    }
  }
}

.invoice {
  display: flex;
  align-items: center;
  height: 112rpx;
  padding: 0 24rpx;
  margin: 26rpx 30rpx 0;
  background-color: #fff;
  border-radius: 23rpx;
  .title {
    flex: 1;
    font-size: 30rpx;
    color: var(--color1);
  }
  .right {
    display: flex;
    align-items: center;
    font-size: 27rpx;
    color: var(--color4);
  }
}

.tips-list {
  margin: 26rpx 30rpx 0;
  .tip {
    margin-bottom: 20rpx;
    font-size: 23rpx;
    line-height: 27rpx;
    color: var(--color4);
    span {
      color: var(--color3);
    }
  }
}
</style>
